<template>
  <div data-v-0f9d3237="" class="index-wrapper">
    <!---->
    <!---->
    <!---->
    <!---->
    <!---->
    <div data-v-67fc70f1="" data-v-0f9d3237="" class="teacher-area-container">
      <!-- https://commonresource-1252524126.cdn.xiaoeknow.com/image/lhzo6g330h9q.jpg -->
      <div
        data-v-73be6a2a=""
        data-v-67fc70f1=""
        class="components-container"
        style="background: url('/components/mentorTopic/backg.jpg') center center / cover; --vertical_margin: 16px; --transverse_margin: 0px;"
      >
        <div data-v-73be6a2a="" class="container-header">
          <div
            data-v-2aee9429=""
            data-v-67fc70f1=""
            class="title-bar-container"
            data-v-73be6a2a=""
            style="padding-top: 24px; padding-bottom: 24px; height: inherit; background: none;"
          >
            <div
              data-v-2aee9429=""
              class="title-content-wrapper"
              style="display: flex; justify-content: space-between"
            >
              <div
                data-v-2aee9429=""
                class="title"
                style="display: flex; align-items: center; flex: 1 1 0%; line-height: 28px; font-size: 20px; font-weight: 600; color: rgb(51, 51, 51);"
              >
                <div data-v-2aee9429="">
                  导师专题
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
        <div data-v-73be6a2a="" class="container-body">
          <div
            data-v-89b40b60=""
            data-v-67fc70f1=""
            class="body-container body-container"
            data-v-73be6a2a=""
            style="--spacing: 12px; --goods-border-radius: 4px"
          >
            <div data-v-89b40b60="" class="body-container-rectangular-card">
              <div
                id="mentorTopic-swiper"
                data-v-2da1b2f8=""
                class="swiper-container"
              >
                <!-- style="transform: translate3d(-1216px, 0px, 0px); transition-duration: 0ms;" -->
                <div
                  id="teacher-previewer-3"
                  class="swiper-wrapper"
                >
                  <!-- style="width: 592px; margin-right: 16px" -->
                  <div
                    class="swiper-slide no-border-white"
                  >
                    <div data-v-2da1b2f8="" class="style1-container">
                      <div data-v-2da1b2f8="" class="teacher-detail">
                        <div data-v-2da1b2f8="" class="teacher-avatar">
                          <!-- https://wechatapppro-1252524126.cdn.xiaoeknow.com/appngipqyj28209/image/b_u_61ed112a6192f_AtGqNtm6/l3cs9klo056y.jpg?imageMogr2/thumbnail/200x/quality/80|imageMogr2/ignore-error/1 -->
                          <img
                            data-v-2da1b2f8=""
                            src="/components/mentorTopic/yang-chen.jpg"
                            alt=""
                          >
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-name">
                          阳晨老师
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-motto">
                          红动优学联合创始人 ▎ 北京朗顿高级视觉设计师 ▎
                          客户：中粮/清华大学/五粮液
                        </div>
                      </div>
                      <!---->
                      <div
                        data-v-2da1b2f8=""
                        class="teacher-courses teacher-courses2"
                      >
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627e5b3fe4b09dda1267fbe7/6?product_id=p_627e5b3fe4b09dda1267fbe7"
                            class="class-title"
                          >
                            LOGOVIS
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627faaa5e4b0812e17999230/6?product_id=p_627faaa5e4b0812e17999230"
                            class="class-title"
                          >
                            第19期版式色彩
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >大专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_6281f4aee4b09dda1268ddc2/8?product_id=p_6281f4aee4b09dda1268ddc2"
                            class="class-title"
                          >
                            学前辅导
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- style="width: 592px; margin-right: 16px" -->
                  <div
                    class="swiper-slide no-border-white"
                  >
                    <div data-v-2da1b2f8="" class="style1-container">
                      <div data-v-2da1b2f8="" class="teacher-detail">
                        <div data-v-2da1b2f8="" class="teacher-avatar">
                          <!-- https://wechatapppro-1252524126.cdn.xiaoeknow.com/appngipqyj28209/image/b_u_61ed112a6192f_AtGqNtm6/l3cvp98h0xva.jpg?imageMogr2/thumbnail/200x/quality/80|imageMogr2/ignore-error/1 -->
                          <img
                            data-v-2da1b2f8=""
                            src="/components/mentorTopic/li-qi.jpg"
                            alt=""
                          >
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-name">
                          丽奇老师
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-motto">
                          红动优学联合创始人 ▎ 花瓣认证导师 ▎
                          抖音联合粉丝过百万
                        </div>
                      </div>
                      <!---->
                      <div
                        data-v-2da1b2f8=""
                        class="teacher-courses teacher-courses2"
                      >
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_6285d880e4b01c509ab28234/6?product_id=p_6285d880e4b01c509ab28234"
                            class="class-title"
                            style="-webkit-line-clamp: 1"
                          >
                            字体高手 只需五招
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627fbaf8e4b0812e17999762/6?product_id=p_627fbaf8e4b0812e17999762"
                            class="class-title"
                            style="-webkit-line-clamp: 1"
                          >
                            第19期包装设计课程
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627fb827e4b01c509ab07482/6?product_id=p_627fb827e4b01c509ab07482"
                            class="class-title"
                            style="-webkit-line-clamp: 1"
                          >
                            第19期字体课程
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >大专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_6281f4aee4b09dda1268ddc2/8?product_id=p_6281f4aee4b09dda1268ddc2"
                            class="class-title"
                            style="-webkit-line-clamp: 1"
                          >
                            学前辅导
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- style="width: 592px; margin-right: 16px" -->
                  <div
                    class="swiper-slide no-border-white"
                  >
                    <div data-v-2da1b2f8="" class="style1-container">
                      <div data-v-2da1b2f8="" class="teacher-detail">
                        <div data-v-2da1b2f8="" class="teacher-avatar">
                          <!-- https://wechatapppro-1252524126.cdn.xiaoeknow.com/appngipqyj28209/image/b_u_61ed112a6192f_AtGqNtm6/l3cvrrap06zw.jpg?imageMogr2/thumbnail/200x/quality/80|imageMogr2/ignore-error/1 -->
                          <img
                            data-v-2da1b2f8=""
                            src="/components/mentorTopic/mu-zi-jian.jpg"
                            alt=""
                          >
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-name">
                          木子见老师
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-motto">
                          湖南艺术家协会成员 ▌ 哇哈哈集团高级视觉设计师 ▍
                          服务客户：中车/中粮/深圳地铁
                        </div>
                      </div>
                      <!---->
                      <div
                        data-v-2da1b2f8=""
                        class="teacher-courses teacher-courses2"
                      >
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627fc0eee4b01a4851ff0dd3/6?product_id=p_627fc0eee4b01a4851ff0dd3"
                            class="class-title"
                          >
                            第八期系统插画课程
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627fb359e4b09dda12685729/6?product_id=p_627fb359e4b09dda12685729"
                            class="class-title"
                          >
                            物料课程
                          </a>
                        </div>
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627faaa5e4b0812e17999230/6?product_id=p_627faaa5e4b0812e17999230"
                            class="class-title"
                          >
                            第19期版式色彩
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- style="width: 592px; margin-right: 16px" -->
                  <div
                    class="swiper-slide no-border-white"
                  >
                    <div data-v-2da1b2f8="" class="style1-container">
                      <div data-v-2da1b2f8="" class="teacher-detail">
                        <div data-v-2da1b2f8="" class="teacher-avatar">
                          <!-- https://wechatapppro-1252524126.cdn.xiaoeknow.com/appngipqyj28209/image/b_u_61ed112a6192f_AtGqNtm6/l3cvumwq0o20.jpg?imageMogr2/thumbnail/200x/quality/80|imageMogr2/ignore-error/1 -->
                          <img
                            data-v-2da1b2f8=""
                            src="/components/mentorTopic/jun-jie.jpg"
                            alt=""
                          >
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-name">
                          俊杰老师
                        </div>
                        <div data-v-2da1b2f8="" class="teacher-motto">
                          梦洁家纺高级视觉设计师 ▍红动优学金牌讲师
                          ▍服务客户：东风汽车/卡酷卫视
                        </div>
                      </div>
                      <!---->
                      <div
                        data-v-2da1b2f8=""
                        class="teacher-courses teacher-courses2"
                      >
                        <div data-v-2da1b2f8="" class="class-content">
                          <span
                            data-v-2da1b2f8=""
                            class="class-type"
                          >专栏</span>
                          <a
                            data-v-2da1b2f8=""
                            target="_blank"
                            href="https://appngipqyj28209.pc.xiaoe-tech.com/detail/p_627fbc6ae4b0cedf38b1e98c/6?product_id=p_627fbc6ae4b0cedf38b1e98c"
                            class="class-title"
                          >
                            第20期PS软件基础课程
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-button-prev arrow iconfont icon-hd_arrow-right" />
                <div class="swiper-button-next arrow iconfont icon-hd_arrow-right" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!---->
    <!---->
    <!---->
    <!---->
    <!---->
    <!---->
  </div>
</template>

<script>
// 引入 Swiper
import Swiper from 'swiper/swiper-bundle.min.js'

export default {
  mounted () {
    // 在组件挂载后初始化 Swiper
    var mySwiper = new Swiper('#mentorTopic-swiper', { // eslint-disable-line no-unused-vars
      // Swiper 配置项
      slidesPerView: 2, // 视口显示的滑块数量
      slidesPerGroup: 2, // 每组显示的滑块数量
      spaceBetween: 16, // 滑块之间的空间大小
      loop: false, // 无限循环
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      autoplay: {
        delay: 3500,
        stopOnLastSlide: false,
        disableOnInteraction: true // 是否在用户交互后禁用自动播放
      }
    })
  }
}
</script>

<style lang="scss" scoped>

.index .index-wrapper[data-v-0f9d3237] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.teacher-area-container[data-v-67fc70f1] {
    width: 1200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
// teacher-area-container

@import '~/static/sass/mentorTopic_sass/variables';
@import '~/static/sass/mentorTopic_sass/components-container';
</style>
